<template>
  <div class="operation">
    <div class="leftbox">
      <div class="newle">
        <div class="little gongdan" >
          <div class="title" >
            <div class="label"></div>
            <div class="text">本月工单</div>
          </div>
          <div class="demo work">
            <div class="header imgbox">
              <div class="littlebox">
                <div>
                  <div class="new">新增</div>
                  <div class="number">{{result.NewlyAdded}} <span class="danwei">个</span></div>
                </div>
                <div>
                  <img src="../../../../assets/statis/xinzen.png" alt="">
                </div>
              </div>
              <div class="littlebox mobel">
                <div>
                  <div class="new">进行中</div>
                  <div class="number">{{result.InProgress}} <span class="danwei">个</span></div>
                </div>
                <div>
                  <img src="../../../../assets/statis/jinxin.png" alt="">
                </div>
              </div>
              <div class="littlebox">
                <div>
                  <div class="new">已完成</div>
                  <div class="number">{{result.Completed}} <span class="danwei">个</span></div>
                </div>
                <div>
                  <img class="yiwanc" src="../../../../assets/statis/yiwanc.png" alt="">
                </div>
              </div>
            </div>
            <div class="body">
              <div class="work" v-for="(item,index) in worklist" :key="index">
                <div class="type over">{{ item.type }}</div>
                <div class="over type">{{ item.dateStr }}</div>
                <div class="over type">{{ item.orgName }}</div>
                <div class="content over">{{ item.content }}</div>
                <div class="status">{{ item.status }}</div>
              </div>
            </div>
          </div>
        </div>
        <div class="little mobel laiyuan" >
          <div class="title">
            <div class="label"></div>
            <div class="text">工单来源分布</div>
          </div>
          <div class="source"><Source :logoinfo="logoinfo"></Source></div>
        </div>
      </div>
      <div class="mapbox">
        <GeoMap :mapmarkerlist="mapmarkerlist" :baseinfo="baseinfo"></GeoMap>
      </div>
    </div>
    <div class="rightbox">
      <div class="littlebut">
        <div class="title">
          <div class="label"></div>
          <div class="text">告警情况</div>
        </div>
        <div class="demo topolice" ref="policerefs">
          <div class="lists" v-for="(item,index) in poliselist" :key="index"
           :style="{color:item.eventLevelName=='普通'?'#e66d17':item.eventLevelName=='轻微'?'#13ccad':'red'}">
            [{{item.eventLevelName}}告警] {{item.alarmTime}} {{item.orgName}} {{item.eventDesc}} 
          </div>
        </div>
      </div>
      <div class="police">
        <CaiJi :logoinfo="logoinfo"></CaiJi>
      </div>
    </div>
  </div>
</template>
<script>
import {getyichangshebeiapi} from '@/api/energy-consumption/GeneralSituation/UserPage' 
import {getmapledapi,gettodayworklistapi} from '@/api/ElectricalDistribution/operation'
import {getUserNoApi} from '@/api/companyRegister.js'
import {infinitScroll} from '@/utils/array'
import { getuseraddressapi } from '@/api/energy-consumption/GeneralSituation/HomePage'
import GeoMap from './GeoMap.vue'
import CaiJi from './CaiJi'
import Source from './component/source'
export default {
  name: 'CallPoliceIndex',
  components: {
    GeoMap,
    Source,
    CaiJi
  },
  data() {
    return {
      worklist:[],
      result:{},
      logoinfo:{},
      baseinfo: {},
      poliselist:[],
      mapmarkerlist: []
    }
  },

  async mounted() {
    const { data: { entity } } = await getUserNoApi()
    this.logoinfo=entity
    const { data: { list: array, entity: baseinfo } } = await getmapledapi({ buro: entity.orgNo })
    const { data: { list,content } } = await gettodayworklistapi({ buro: entity.orgNo })
    this.worklist = list
    const {data:{list:poliselist}} = await getyichangshebeiapi({ _pageNo: 0, _pageSize: 100, isProcessed: false, orgNo: entity.orgNo, orgType:entity.orgType, alarmType: '314' })
    this.poliselist=poliselist
    const chineseToEnglish = {
        "新增": "NewlyAdded",
        "进行中": "InProgress",
        "已完成": "Completed"
    }
    content.split(',').forEach((pair) => {
      const [chineseKey, value] = pair.split('：');
      const englishKey = chineseToEnglish[chineseKey];
      if (englishKey) {
          this.result[englishKey] = parseInt(value, 10);
      }
    })
    this.baseinfo=baseinfo
    this.mapmarkerlist = array
    infinitScroll(this.$refs.policerefs)
  },

  methods: {}
}
</script>
<style scoped>

.operation {
  height: 100%;
  padding: 10px;
  /* display: flex; */
  .leftbox {
    /* width: 30%; */
    height: 100%;
    display: flex;
    box-sizing: border-box;
    height: 62%;
    margin-bottom: 10px;
    .newle{
      width: 35%;
      margin-right: 10px;
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      .body{
         height: 57%;
         overflow-y: auto;
         padding: 0 10px 10px 10px;
      }
      .header {
          display: flex;
          height: 38%;
          padding: 10px;
          .littlebox{
            display: flex;
            width: calc(33.3% - 7px);
            /* height: 40%; */
            filter: drop-shadow(rgba(0, 0, 0, .15) 3px 3px 6px);
            background-color: #fff;
            border-radius: 15px;
            align-items: center;
            justify-content: space-evenly;
            .new{
              color: #646464;
            }
            .danwei{
              font-size: 14px;
              color: #646464;
            }
            .number{
              font-size: 20px;
              color: #000;
            }
            img{
              width: 32px;
              height: 32px;
            }
            .yiwanc{
              width: 40px;
              height: 40px;
            }
          }
          .mobel{
            margin: 0 10px;
          }
        }
    }
    .mapbox{
      width: 65%;
    }
    .little {
      box-sizing: border-box;
      /* padding: 10px; */
      background-color: #fff;
      .title {
        display: flex;
        .label {
          width: 4px;
          height: 20px;
          background-color: #5087ec;
          margin-right: 10px;
        }
        .text {
          color: #5087ec;
          font-weight: bold;
        }
      }
      .source {
        height: 90%;
      }
      .demo{
        height: 88%;
        overflow-y: auto;
      }
      .work {
        font-size: 14px;

        .body{
          /* height: 60%;
          overflow-y: auto; */
          .work{
            display: flex;
            margin-bottom: 8px;
            .type{
              width: 20%;
            }
            .content{
              width: 30%;
            }
            .status{
              width: 10%;
            }
            .over{
              white-space: nowrap; 
              overflow: hidden;
              text-overflow: ellipsis; 
            }
          }
        }
      }
    }
    .laiyuan{
      padding: 20px;
    }
    .little.mobel {
      height:calc(50% - 10px);
    }
    .gongdan{
      margin-bottom: 10px;
      height: 50%;
      padding: 10px;
      .title{
        margin: 10px 0 0 10px;
      }
    }
  }
  .rightbox {
    /* flex: 1; */
    height: calc(38% - 10px);
    display: flex;
    .littlebut{
      width: 34.8%;
      height: 100%;
      padding: 20px;
      margin-right: 10px;
      background-color: #fff;
      .title {
        display: flex;
        .label {
          width: 4px;
          height: 20px;
          background-color: #5087ec;
          margin-right: 10px;
        }
        .text {
          color: #5087ec;
          font-weight: bold;
        }
      }
      .demo {
        height: 85% !important;
        margin-top: 10px;
      }
      .work{
        margin-top: 10px;
      }
      .topolice{
        font-size: 14px;
        overflow-y: auto;
        line-height: 1.5;
        .lists{
          margin-bottom: 5px;
        }
      }
      .source {
        height: 90%;
      }
    }
    .police {
      height: 100%;
      width: calc(65% - 8.8px);
    }
  }
}
</style>
